<template>
  <view>
    <view class="bigBoxcav">
      <view class="headPortrait">
        <image @click="login" :src='topheardUrl?topheardUrl:url' mode=""></image>
        <text>{{topheardName?topheardName:'用户昵称'}}</text>
        <view @click="myIntegral">积分:<text style="color: blue;" >{{topheardNum}}</text></view>
      </view>
    </view>
  </view>

</template>

<script>
  import {
    defineComponent,
    toRefs,
    reactive,
    ref
  } from 'vue'
  export default defineComponent({
    name: 'my-usernametop',
    components: {
    
    },
    setup() {
      const userInfo = reactive(uni.getStorageSync('userInfo')
      ?JSON.parse(uni.getStorageSync('userInfo')):{topheardName:'',topheardUrl:'',topheardNum:''})
      let isLogin = uni.getStorageSync('userInfo')?true:false
      const url=ref('https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u875.svg')         
      //积分页面
      const myIntegral=()=>{
        if(isLogin){
          uni.navigateTo({
          	url: '/subpkg/my-bonuspoints/my-bonuspoints'
          });
        }else{
          uni.showToast({
          	title: '请登录后查看',
          	duration: 2000,
            icon:'none',
          });
        }
      }
            // 登录
    			const login=()=>{
    				// console.log("触发")
            if(isLogin){
              console.log('登陆了,我调了')
              uni.navigateTo({
              	url: '/subpkg/memberInfo/memberInfo'
              });
              }else{
              uni.getUserProfile({
                desc: "获取你的昵称、头像、地区及性别",
                success: (res) => {
                  // console.log("所有",res)
                  uni.setStorageSync('userInfo',
                  JSON.stringify(
                  {topheardName:res.userInfo.nickName,
                  topheardUrl:res.userInfo.avatarUrl,
                  topheardNum:res.userInfo.gender}))
                  userInfo.topheardNum = res.userInfo.gender
                  userInfo.topheardName = res.userInfo.nickName
                  userInfo.topheardUrl = res.userInfo.avatarUrl
                  isLogin = true;
                  }
              })
            }
    		}
      return {
        ...toRefs(userInfo),
        url,
        login,
        myIntegral
      }
    },
  })
</script>

<style scoped lang='scss'>
  .bigBoxcav {
    height: 83px;
    border-radius: 0 0 50% 50%;
    background-color: rgb(204, 204, 204);
    margin-bottom: 70px;
    .headPortrait {
      position: relative;
      display:flex;
      flex-direction: column ;
      align-items: center;
      flex-wrap:wrap;
      top: 20px;
      margin: 0 auto;
      width: 211px;
      height: 111px;
      background-color:white;
      border:1px solid rgba(204, 204, 204, 1);
      image{
        border-radius: 50%;
        margin: 5px 0;
        width: 45px;
        height: 45px;
      }
      view{
        margin: 5px 0;
      }
    }
  }
</style>
